<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
用户名： <input type="" name="">
<p style="color: red;"></p>

<select>
	<option value="wzry">王者荣耀</option>
	<option value="hp">和平</option>
	<option value="al">奥拉星</option>
	<option value="aq">奥奇传说</option>
	<option value="lk">洛克王国</option>
</select>
<script type="text/javascript">
	let input = document.querySelector('input')
	let p = document.querySelector('p')

	let select = document.querySelector('select')

	//表单失去焦点 
	input.onblur = function() {
		// alert('111')
		p.innerText = ''
		console.log(this.value)
		if(!this.value){
			p.innerText = '用户名不能为空'
		}else if(this.value.length < 5){
			p.innerText = '用户名长度不能小于5位'
		}
	}
	//表单获取焦点
	input.onfocus = function() {
		// alert('222')
	}
	//表单值改变的时候
	input.onchange = function() {
		console.log('改变了')
	}

	select.onchange = function() {
		console.log('选项更改了',this.value)
	} 


</script>
</body>
</html>